<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>用电监控</span>
        </div>
      </template>
      <div class="electricity-monitor">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">2,860</div>
                <div class="stat-label">装机容量 (kVA)</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">481.20</div>
                <div class="stat-label">有功功率 (kW)</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card">
              <div class="stat-item">
                <div class="stat-value">3,600</div>
                <div class="stat-label">今日用电量 (kWh)</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 用电监控页面逻辑
</script>

<style lang="scss" scoped>
.electricity-monitor {
  .stat-card {
    .stat-item {
      text-align: center;
      .stat-value {
        font-size: 32px;
        font-weight: bold;
        color: #52c41a;
        margin-bottom: 8px;
      }
      .stat-label {
        font-size: 14px;
        color: #666;
      }
    }
  }
}
</style>
